<template>
  <div class="wrapper">
    <div class="header">
      <el-tag v-if="step==0" class="headTag" effect="dark">用户信息</el-tag>
      <el-tag v-if="step==1" class="headTag" effect="dark">基本信息</el-tag>
      <el-tag v-if="step==2" class="headTag" effect="dark">企业资质</el-tag>
      <hr height="2px" color="#409EFF"/>
    </div>
    <div class="contents">
      <div v-show="step==0" class="userInfo">
        <el-form :model="userInfo" :rules="userInfoRules" ref="userInfo" label-width="40%" class="userInfo">
          <el-row>
            <el-col span="18">
              <el-form-item required label="用户名" prop="username">
                <el-input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" v-model="userInfo.username"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="18">
              <el-form-item required label="电话" prop="phone">
                <el-input v-model="userInfo.phone" onkeyup="this.value=this.value.replace(/\D/g,'')"
                          onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="11"
                          show-word-limit></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="18">
              <el-form-item label="身份证号" prop="identity">
                <el-input v-model="userInfo.identity" onkeyup="this.value=this.value.replace(/\D/g,'')"
                          onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="18"
                          show-word-limit></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="18">
              <el-form-item required label="住址" prop="address">
                <el-input v-model="userInfo.address"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="18">
              <el-form-item label="密码" prop="userpaw">
                <el-input v-model="userInfo.userpaw" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                          show-password></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="18">
              <el-form-item required label="确认密码">
                <el-input v-model="password2" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" show-password></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div v-show="step==1" class="baseInfo">
        <el-form :model="enterpriseInfo" :rules="enterpriseInfoRules" ref="enterpriseInfo" label-width="30%"
                 class="enterpriseInfo" size="mini">
          <el-row>
            <el-col span="12">
              <el-form-item required label="企业名称" prop="supplierName">
                <el-input v-model="enterpriseInfo.supplierName"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item required label="企业类型" prop="enterpriseType">
                <el-select v-model="enterpriseInfo.enterpriseType" placeholder="请选择企业类型">
                  <el-option label="供应商" value="供应商"></el-option>
                  <el-option label="需求商" value="需求商"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item required label="法定代表人" prop="legalPerson">
                <el-input v-model="enterpriseInfo.legalPerson"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item required label="法人身份证" prop="legalPersonIdNumber">
                <el-input maxlength="18" v-model="enterpriseInfo.legalPersonIdNumber"
                          onkeyup="this.value=this.value.replace(/\D/g,'')"
                          onafterpaste="this.value=this.value.replace(/\D/g,'')" show-word-limit></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item required label="注册地区" prop="registrationArea">
                <el-input v-model="enterpriseInfo.registrationArea"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item required label="企业邮箱" prop="enterpriseMailbox">
                <el-input type="email" v-model="enterpriseInfo.enterpriseMailbox"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item required label="联系电话" prop="contactNumber">
                <el-input v-model="enterpriseInfo.contactNumber" onkeyup="this.value=this.value.replace(/\D/g,'')"
                          onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="11"
                          show-word-limit></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item required label="传真" prop="fax">
                <el-input v-model="enterpriseInfo.fax"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item required label="邮政编码" prop="postalCode">
                <el-input v-model="enterpriseInfo.postalCode" onkeyup="this.value=this.value.replace(/\D/g,'')"
                          onafterpaste="this.value=this.value.replace(/\D/g,'')"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item required label="注册资金（万元）" prop="registerFund">
                <el-input v-model="enterpriseInfo.registerFund" onkeyup="if(isNaN(value))execCommand('undo')"
                          onafterpaste="if(isNaN(value))execCommand('undo')"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item required label="营业执照号" prop="businessCertificateId">
                <el-input v-model="enterpriseInfo.businessCertificateId"
                          onkeyup="this.value=this.value.replace(/\D/g,'')"
                          onafterpaste="this.value=this.value.replace(/\D/g,'')"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item required label="组织机构代码" prop="organizationCode">
                <el-input v-model="enterpriseInfo.organizationCode"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item required label="经营许可证编号" prop="businessLicenseId">
                <el-input v-model="enterpriseInfo.businessLicenseId"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item required label="税务登记证代码" prop="taxRegistrationCertificateCode">
                <el-input v-model="enterpriseInfo.taxRegistrationCertificateCode"
                          onkeyup="this.value=this.value.replace(/\D/g,'')"
                          onafterpaste="this.value=this.value.replace(/\D/g,'')"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item required label="开户银行" prop="bankOfDeposit">
                <el-input v-model="enterpriseInfo.bankOfDeposit"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item required label="账号" prop="accountNumber">
                <el-input v-model="enterpriseInfo.accountNumber" maxlength="19" onkeyup="this.value=this.value.replace(/\D/g,'')"
                          onafterpaste="this.value=this.value.replace(/\D/g,'')" show-word-limit></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item required label="煤源存放地点、数量、质量" prop="coalDescription" label-width="26%">
            <el-input type="textarea" v-model="enterpriseInfo.coalDescription"></el-input>
          </el-form-item>
          <el-form-item required label="运输方式及保障能力" prop="typeOfShipping" label-width="26%">
            <el-input type="textarea" v-model="enterpriseInfo.typeOfShipping"></el-input>
          </el-form-item>
          <el-form-item required label="应商介绍" prop="introductionToYingshang" label-width="26%">
            <el-input type="textarea" v-model="enterpriseInfo.introductionToYingshang"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="step==2" class="enterpriseInfo">
        <el-form :model="enterpriseInfo" :rules="enterpriseInfoRules" ref="enterpriseInfo" label-width="47%"
                 class="enterpriseInfo">
          <el-row>
            <el-col span="24">
              <el-form-item required label="营业执照" prop="buLicense">
                <input type="file" accept="image/*" id="buLicense" @change="fileUpload('buLicense')"></input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24">
              <el-form-item required label="税务登记证" prop="taxRegiSrtificate">
                <input type="file" accept="image/*" id="taxRegiSrtificate"
                          @change="fileUpload('taxRegiSrtificate')"></input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24">
              <el-form-item required label="组织机构代码证" prop="organCodeCertificate">
                <input type="file" accept="image/*" id="organCodeCertificate"
                          @change="fileUpload('organCodeCertificate')"></input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24">
              <el-form-item required label="开户许可证" prop="accountOpenPermit">
                <input type="file" accept="image/*" id="accountOpenPermit"
                          @change="fileUpload('accountOpenPermit')"></input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24">
              <el-form-item required label="煤炭经营许可证" prop="coalBuLicense">
                <input type="file" accept="image/*" id="coalBuLicense"
                          @change="fileUpload('coalBuLicense')"></input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24">
              <el-form-item required label="法人身份证" >
                <input type="file" accept="image/*" id="corporateIdCard" @change="fileUpload('corporateIdCard')"></input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <el-button type="danger" @click="backToLogin" plain>取消注册</el-button>
      <el-button v-if="step!=0" type="primary" @click="back" plain>上一步</el-button>
      <el-button v-if="step!=2" type="success" @click="next" plain>下一步</el-button>
      <el-button v-if="step==2" @click="sendData" type="success" plain>提交注册</el-button>
    </div>
  </div>
</template>

<script>
  import Common from '@/components/common/Common';
    export default {
        name: "RegisterIndex",
        data() {
            return {
                step: 0,
                password2: '',
                userInfo: {
                    username: '',
                    phone: '',
                    identity: '',
                    address: '',
                    userpaw: ''
                },
                userInfoRules: {
                    identity: {required: true, message: '请输入身份证号', trigger: 'blur'},
                    userpaw: {required: true, message: '请输入密码', trigger: 'blur'}
                },
                enterpriseInfo: {
                    //基本信息
                    supplierName: '',
                    enterpriseType: '',
                    legalPerson: '',
                    legalPersonIdNumber: '',
                    registrationArea: '',
                    enterpriseMailbox: '',
                    contactNumber: '',
                    fax: '',
                    postalCode: '',
                    registerFund: '',
                    businessCertificateId: '',
                    organizationCode: '',
                    businessLicenseId: '',
                    taxRegistrationCertificateCode: '',
                    bankOfDeposit: '',
                    accountNumber: '',
                    coalDescription: '',
                    typeOfShipping: '',
                    introductionToYingshang: '',
                    //企业资质
                    buLicense: '-1',
                    taxRegiSrtificate: '-1',
                    organCodeCertificate: '-1',
                    accountOpenPermit: '-1',
                    coalBuLicense: '-1',
                    corporateIdCard: '-1'
                },
                enterpriseInfoRules: {
                    legalPerson: {trigger: 'blur'},
                    legalPersonIdNumber: {required: true, message: '请输入法人身份证', trigger: 'blur'}
                },
                imagePath: Common.API+'img/'
            }
        },
        methods: {
            fileUpload(id) {
                var target = document.getElementById(id);
                var obj=this.enterpriseInfo;
                obj[id]=this.imagePath+target.files[0].name;//设置该图片的路径
                var formData=new FormData();
                formData.append('imageFile',target.files[0]);
                this.axios.post("http://localhost:8071/register/uploadImage",formData,{
                    contentType: 'multipart/form-data',
                    processData: false,
                    cache: false,
                    contentType: false
                }).then(res=>{
                    console.log(res);
                    if(res.data!='failed'){
                        this.$message({
                            showClose: true,
                            message: '上传成功！',
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            showClose: true,
                            message: '上传失败！！',
                            type: 'error'
                        });
                    }
                }).catch(error=>{
                    console.log(error);
                    this.$message({
                        showClose: true,
                        message: '上传失败！',
                        type: 'error'
                    })
                })
            },
            next() { //下一步
                if (this.step != 2) {
                    if (this.step == 0) {
                        var obj = this.userInfo;
                        for (var p in obj) {
                            if (obj[p] == '') {
                                // alert(p+'不能为空!');
                                this.$message({
                                    showClose: true,
                                    message: p + '不能为空!',
                                    type: 'error'
                                });
                                return;
                            }
                        }
                        if (!this.passwordCheck()) {
                            return;
                        }
                    }
                    if (this.step == 1) {
                        var obj = this.enterpriseInfo;
                        for (var p in obj) {
                            if (obj[p] == '') {
                                // alert(p+'不能为空!');
                                this.$message({
                                    showClose: true,
                                    message: p + '不能为空!',
                                    type: 'error'
                                });
                                return;
                            }
                        }
                    }
                    this.step++;
                }
            },
            back() { //上一步
                if (this.step != 0) {
                    this.step--;
                }
            },
            passwordCheck() {
                var pw1 = this.userInfo.userpaw;
                var pw2 = this.password2;
                if (pw1 != pw2) {
                    // alert('两次输入的密码不一致');
                    this.$message({
                        showClose: true,
                        message: '两次输入的密码不一致',
                        type: 'error'
                    });
                    return false;
                }
                return true;
            },
            sendData() {
                //验证是否已上传企业资质
                var obj = this.enterpriseInfo;
                for (var p in obj) {
                    if (obj[p] == '-1') {
                        // alert('请上传'+p+'凭证！');
                        this.$message({
                            showClose: true,
                            message: '请上传' + p + '凭证',
                            type: 'error'
                        });
                        return;
                    }
                }
                //发送请求
                var data = {'userInfo': this.userInfo, 'enterpriseInfo': this.enterpriseInfo};
                data = JSON.stringify(data);
                this.axios.post("http://localhost:8071/register", data, {
                        // headers: {'Content-Type': 'application/x-www-form-urlencoded'},  用这个请求头后端接收的数据都为null
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        dataType: JSON
                    }
                ).then(res => {
                    console.log(res);
                    // alert('注册成功，待管理员审核！');
                    this.$message({
                        showClose: true,
                        message: '注册成功，请耐心等待管理员审核,管理员会在三个工作日内完成审核！',
                        type: 'success'
                    });
                    this.$router.push('Login');
                }).catch(error => {
                    console.log(error);
                    // alert('注册失败！');
                    this.$message({
                        showClose: true,
                        message: '注册失败！',
                        type: 'warning'
                    });
                });
            },
            backToLogin() {
                this.$confirm('确定要取消注册吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '取消注册！'
                    });
                    this.$router.push('Login');
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消操作!'
                    })
                })

            }
        }
    }
</script>

<style scoped>
  .wrapper {
    margin-left: 20%;
    margin-right: 20%;
  }

  .headTag {
    width: 10%;
    text-align: center;
    border-radius: 0;
    margin-top: 20px;
  }

  .contents {
    margin-top: 10px;
  }

  .footer {
    text-align: center;
  }

</style>
